<template>
  <div>
    <b-container>
      <div class="table">
        <!-- 网元表-->
        <NetTable v-on:netModelShow="$refs.NetModal.show()" v-on:netWorkArchiveModalShow="$refs.NetWorkArchiveModal.show()" :items="items">
        </NetTable>
      </div>
    </b-container>
    <!-- 用来查询此网元下的网元能力 -->
    <b-modal ref="NetModal" ok-only title="网元" size="lg">
      <b-container fluid>
        <div class="table">
          <NetTable v-on:netModelShow="$refs.NetWorkModal.show()">
          </NetTable>
          </b-table>
        </div>
      </b-container>
      <div slot="modal-footer" class="w-100">
        <b-btn size="sm" class="float-right" variant="primary" @click="$refs.NetModal.hide()">
          返回
        </b-btn>
      </div>
    </b-modal>
    <!-- 用来查看网元能力的详细信息 -->
    <b-modal ref="NetWorkModal" ok-only title="网元能力" size="lg">
      <NetWorkInfoModal></NetWorkInfoModal>
      <div slot="modal-footer" class="w-100">
        <b-btn size="sm" class="float-right" variant="primary" @click="$refs.NetModal.show()">
          返回
        </b-btn>
      </div>
    </b-modal>
    <!-- 网元归档使用Modal -->
    <b-modal ref="NetWorkArchiveModal" ok-only title="网元" size="lg">
      <b-container fluid>
        <div>
          <span style="float:left; margin-top:5px;">网元能力种类：</span>
          <b-form-select style="margin-left:10px;width: auto;" v-model="selected" :options="netWorkArchiveModal.options" size="sm" />
        </div>
      </b-container>
      <div slot="modal-footer" class="w-100">
        <b-btn size="sm" class="float-right" style="margin-left:5px;" variant="primary" @click="$refs.NetWorkArchiveModal.hide()">
          保存
        </b-btn>
        <b-btn size="sm" class="float-right" style="margin-right:5px;" variant="primary" @click="$refs.NetWorkArchiveModal.hide()">
          返回
        </b-btn>
      </div>
    </b-modal>
  </div>
</template>

<script>
import NetTable from "../../components/NetTable.vue";
import Search from "../../components/Search.vue";
import NetWorkInfoModal from "../../components/NetWorkInfoModal.vue";
//测试
const items = [
  { isActive: true, age: 40, first_name: "Dickerson", last_name: "Macdonald" },
  { isActive: false, age: 21, first_name: "Larsen", last_name: "Shaw" },
  { isActive: false, age: 89, first_name: "Geneva", last_name: "Wilson" },
  { isActive: true, age: 38, first_name: "Jami", last_name: "Carney" }
];
export default {
  name: "Classify",
  components: {
    NetTable,
    Search,
    NetWorkInfoModal
  },
  data() {
    return {
      netWorkArchiveModal: {
        options: [
          { value: "a", text: "This is First option" },
          { value: "b", text: "Default Selected Option" },
          { value: "c", text: "This is another option" },
          { value: "d", text: "This one is disabled", disabled: true },
          { value: "e", text: "This is option e" },
          { value: "f", text: "This is option f" },
          { value: "g", text: "This is option g" }
        ]
      },
      items: [
        {
          isActive: true,
          age: 40,
          name: { first: "Dickerson", last: "Macdonald" }
        }
      ],
      netTable: {
        fields: ["isActive", "first_name", "last_name", "操作"],
        items: items,
        currentPage: 3,
        pages: 10,
        limit: 10,
        selected: null,
        options: [
          { value: "A", text: "Option A (from options prop)" },
          { value: "B", text: "Option B (from options prop)" }
        ]
      },
      netWorkTable: {
        fields: ["isActive", "first_name", "last_name", "操作"],
        items: items,
        currentPage: 3,
        pages: 10,
        limit: 10
      },
      netWorkModal: {
        id: "aasdfasdfadsfa",
        name: "asdfasdfads"
      }
    };
  },
  methods: {}
};
</script>
<style lang="scss">
.control-group {
  margin-bottom: 10px;
}
.pull-left {
  float: left;
}
.help-inline {
  display: inline-block;
  *display: inline;
  padding-left: 5px;
  vertical-align: middle;
  *zoom: 1;
}
.help-block,
.help-inline {
  color: #595959;
}
</style>
